<!DOCTYPE html>
<html lang="en">
<head>
<title>huangliusong</title>
<script src="./vue.js"></script>
<style type="text/css">
	.fade-enter,.fade-leave-to{
		opacity:0;
	}
	.fade-leave-active,.fade-leave-avtive{
		transition: opacity 1s;
	}
</style>
</head>
 
<body>
	<div id="root">
		<transition name="fade" mode="out-in">
			<component :is="type"></component>
		</transition>
		<button @click="handeClick">切换</button>
	</div>

	<script type="text/javascript">
	Vue.component('child',{
		template:"<div>child</div>"
	})

	Vue.component('child-one',{
		template:"<div>child-one</div>"
	})

	var vm=new Vue({ 
		el:"#root",
		data:{
			type:'child'
		},
		methods:{
			handeClick:function(){
				this.type=this.type==='child'?'child-one':'child'
			}
		}
	})
	</script>
</body>

</html>